const globalClass = () => {
  const globalClass = '.ant-design-pro .ant-layout-has-sider '; // 公共类名
  const siderClass = globalClass + '.ant-layout-sider'; //侧边栏类名
  const contentClass = globalClass + '.ant-layout'; //右侧公共类名
  const headerClass = `${contentClass} .ant-layout-header .ant-pro-global-header`; //头部类名

  const subMenuClass = `${siderClass} .ant-layout-sider-children .ant-pro-sider-menu`; //左侧子菜单类名
  const selectMenuClass = `${subMenuClass} .ant-menu .ant-menu-item-selected`; //选中的左侧Menu
  const menuItemClass = `${subMenuClass} .ant-menu .ant-menu-item`; //左侧菜单类名

  const layoutTabsClass = `${contentClass} .ant-layout-content #NavTabs .ant-tabs`;

  return {
    globalClass,
    siderClass,
    contentClass,
    headerClass,
    subMenuClass,
    selectMenuClass,
    menuItemClass,
    layoutTabsClass,
  };
};

/**
 * 页面加载设置主题方法
 * */
export const switchTheme = (
  themeInfo: Record<string, any>[],
  themeID: Record<string, any>,
) => {
  if (themeInfo && themeInfo?.length > 0) {
    try {
      let targetTheme = themeInfo?.find((item) => item?.id === themeID);

      let themeStyle = targetTheme?.themeStyle; //页面样式

      // let defaultStyle = targetTheme?.defaultStyle;

      let className = globalClass(); //类名

      let themeInnerHtml = '';

      // /* 头部导航条样式 */
      // if (themeStyle?.logo) {
      //   themeInnerHtml += `#themeID ${className.siderClass} .ant-layout-sider-children .ant-pro-sider-logo{background:${themeStyle?.logo?.background};}`;
      // }
      //
      // /* 头部样式*/
      // if (themeStyle?.header) {
      //   themeInnerHtml += `#themeID ${className.headerClass}{background-color:${themeStyle?.header?.background}}`;
      //   themeInnerHtml += `#themeID ${className.headerClass}{background-color:${themeStyle?.header?.background}}`;
      // }
      //
      // themeInnerHtml += `#themeID div span a p{color:#ff4a4f !important}`;
      //
      // /* 左侧侧边栏背景 */
      // if (defaultStyle?.['@menu-dark-bg']) {
      //   themeInnerHtml += `#themeID ${className.siderClass}{background-color:${defaultStyle?.['@menu-dark-bg']}}`; //侧边栏背景
      // }
      //
      // /* 侧边栏子菜单样式 */
      // if (defaultStyle?.['@menu-dark-submenu-bg']) {
      //   themeInnerHtml += `#themeID ${className.subMenuClass} .ant-menu{background-color:${defaultStyle?.['@menu-dark-submenu-bg']}}`;
      // }

      /* 侧边栏选中子菜单 */
      if (themeStyle?.sider) {
        let siderStyle = themeStyle?.sider;
        // themeInnerHtml += `#themeID ${className.subMenuClass} .ant-menu-submenu-selected{color:${siderStyle?.['active_color']}}`; //被选中主菜单的字体颜色的
        themeInnerHtml += `#themeID ${className.subMenuClass} .ant-menu-submenu .ant-menu-submenu-title:hover{color:${siderStyle?.['active_color']}}`; //被选中主菜单的字体颜色的
        themeInnerHtml += `#themeID ${className.siderClass} .ant-menu-submenu .ant-menu-sub .ant-menu-item a:hover{color:${siderStyle?.['active_color']} !important}`; //被选中主菜单的字体颜色的
        themeInnerHtml += `#themeID ${className.siderClass} .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow{color:${siderStyle?.['active_color']} !important}`; //被选中主菜单的icon颜色
        // themeInnerHtml += `#themeID ${className.selectMenuClass}{background-color:${siderStyle?.['active_bg_color']}}`; //选中子菜单背景
        // themeInnerHtml += `#themeID ${className.selectMenuClass}::after{border-right:3px solid ${siderStyle?.['active_color']}}`; //选中子菜单右侧border
        // themeInnerHtml += `#themeID ${className.selectMenuClass} a{color:${siderStyle?.['active_color']}}`; //选中子菜单右侧border
        // themeInnerHtml += `#themeID ${className.siderClass} .ant-layout-sider-children .ant-menu{color:${siderStyle?.['color']}}`; //菜单字体颜色
        // themeInnerHtml += `#themeID ${className.siderClass} .ant-menu-submenu .ant-menu-sub .ant-menu-item a{color:${siderStyle?.['color']}}`;
      }

      /*  /!* 头部切换窗口切换样式 （Tabs） *!/
        if (themeStyle?.tab) {
          let tabStyle = themeStyle?.tab;
          themeInnerHtml += `#themeID ${className.layoutTabsClass} .ant-tabs-nav{border-bottom:1px solid ${tabStyle?.['tab_bottom_border_color']} !important}`; //头部tabs border-bottom 底色
          themeInnerHtml += `#themeID ${className.layoutTabsClass} .ant-tabs-nav{border-top:1px solid ${tabStyle?.['tab_top_border_top']} !important}`; //头部tabs border-bottom 底色
          themeInnerHtml += `#themeID ${className.layoutTabsClass} .ant-tabs-nav{background:${tabStyle?.['tab_content_bg']} !important}`; //头部tabs 背景颜色
          themeInnerHtml += `#themeID ${className.layoutTabsClass} .ant-tabs-nav::before{border-bottom:none}`;
          // themeInnerHtml += `#themeID ${className.layoutTabsClass} .ant-tabs-nav .ant-tabs-tab{background:${tabStyle?.['tab_top_border_top']} !important}`; //Tabs.TabsPane 背景颜色
          themeInnerHtml += `#themeID ${className.layoutTabsClass} .ant-tabs-nav .ant-tabs-tab{color:${tabStyle?.['tab_content_color']} !important}`; // Tabs 字体颜色
          themeInnerHtml += `#themeID ${className.layoutTabsClass} .ant-tabs-nav .ant-tabs-tab{border:none}`;
          themeInnerHtml += `#themeID ${
            className.layoutTabsClass
          } .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn{color:${
            tabStyle?.['tab_content_active_color'] ??
            defaultStyle?.['@primary-color']
          }}`; //选中时字的样式
          themeInnerHtml += `#themeID ${
            className.layoutTabsClass
          } .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-remove{color:${
            tabStyle?.['tab_content_active_color'] ??
            defaultStyle?.['@primary-color']
          }}`; //选中时关闭icon的样式
          themeInnerHtml += `#themeID ${
            className.layoutTabsClass
          } .ant-tabs-nav .ant-tabs-tab-active{border-bottom:1px solid ${
            tabStyle?.['tab_content_active_color'] ??
            defaultStyle?.['@primary-color']
          }}`; //选中时border-bottom的样式
        }
  
        /!* 内容区样式 *!/
        if (themeStyle?.tabContent) {
          let tabCntStyle = themeStyle?.tabContent;
          themeInnerHtml += `#themeID ${className.layoutTabsClass} .ant-tabs-content-holder .ant-tabs-content{background:${tabCntStyle?.background}}`;
        }
  
        /!* 主题色，以及其他选中的颜色 button / radio / checkbox*!/
        if (defaultStyle?.['@primary-color']) {
          // themeInnerHtml += '#themeID .ant-btn-primary{}'
        }
  
        /!* Card-卡片全局样式 *!/
        if (themeStyle?.['card_content_bg']) {
          //card内容区背景 body
          themeInnerHtml += `#themeID .ant-card .ant-card-body{background:${themeStyle?.['card_content_bg']} !important}`;
        }
        if (themeStyle?.['card_border']) {
          //card 边线 bordered
          themeInnerHtml += `#themeID .ant-card-bordered{border:1px solid ${themeStyle?.['card_border']} !important}`;
        }
        if (themeStyle?.['card_title_bg_color']) {
          // card头部 标题背景
          themeInnerHtml += `#themeID .ant-card .ant-card-head{background:${themeStyle?.['card_title_bg_color']} !important}`;
        }
        if (themeStyle?.['card_title_border_color']) {
          // card头部 标题背景
          themeInnerHtml += `#themeID .ant-card .ant-card-head{border-bottom:1px solid ${themeStyle?.['card_title_border_color']} !important}`;
        }
  
        /!* Modal 全局弹窗样式 *!/
        if (themeStyle?.['modal_content_bg']) {
          //Modal 弹窗内容背景色，footer背景色
          themeInnerHtml += `#themeID .ant-modal-body{background:${themeStyle?.['modal_content_bg']} !important}`;
          themeInnerHtml += `#themeID .ant-modal-footer{background:${themeStyle?.['modal_content_bg']} !important}`;
        }
        if (themeStyle?.['modal_footer_border_color']) {
          //Modal footer border-top
          themeInnerHtml += `#themeID .ant-modal-footer{border-top:1px solid ${themeStyle?.['modal_footer_border_color']} !important}`;
        }
        if (themeStyle?.['modal_title_bg_color']) {
          //Modal ,头部背景色
          themeInnerHtml += `#themeID .ant-modal-header{background:${themeStyle?.['modal_title_bg_color']} !important}`;
        }
        if (themeStyle?.['modal_title_border_color']) {
          // Modal 头部border-bottom 底色
          themeInnerHtml += `#themeID .ant-modal-header{border-bottom:1px solid ${themeStyle?.['modal_title_border_color']} !important}`;
        }
  
        /!*Form 表单主题配置 *!/
        if (defaultStyle?.['form-placeholder-color']) {
          //select input datepicker placeholder 颜色
          let placeholderStyle = defaultStyle['form-placeholder-color'].replace(
            '!important',
            '',
          );
          themeInnerHtml += `#themeID .ant-input::-webkit-input-placeholder{color:${placeholderStyle}}`;
          themeInnerHtml += `#themeID .ant-select .ant-select-selection-placeholder{color:${placeholderStyle}}`;
          themeInnerHtml += `#themeID .ant-picker .ant-picker-input>input::-webkit-input-placeholder{color:${placeholderStyle}}`;
          themeInnerHtml += `#themeID .ant-picker .anticon{color:${placeholderStyle}}`;
        }
        if (defaultStyle['form-border-color']) {
          //select input datepicker 边框颜色
          let borderStyle = defaultStyle['form-border-color'].replace(
            '!important',
            '',
          );
          themeInnerHtml += `#themeID .ant-input-affix-wrapper textarea{border-color:${borderStyle}}`;
          themeInnerHtml += `#themeID .ant-input-affix-wrapper{border-color:${borderStyle}}`;
          themeInnerHtml += `#themeID .ant-select-selector{border-color:${borderStyle}}`;
          themeInnerHtml += `#themeID .ant-picker{border-color:${borderStyle}}`;
        }
  
        /!*TableList 表格样式-------------------------------------------------------------------------START *!/
        //表格title背景颜色
        if (defaultStyle['table-title-bg']) {
          let val = defaultStyle['table-title-bg'].replace('!important', '');
          themeInnerHtml += `#themeID .ant-table-title{background-color:${val}}`;
        } else {
          themeInnerHtml += `#themeID .ant-table-title{background-color:''}`;
        }
        //表头背景颜色
        if (defaultStyle['table-header-bg']) {
          let val = defaultStyle['table-header-bg'].replace('!important', '');
          themeInnerHtml += `#themeID .ant-table-thead .ant-table-cell{background-color:${val}}`;
          // str += `#themePreviewBox .ant-table-thead .ant-table-selection-column{background-color:#fff}`;
        }
        //表头文字颜色
        if (defaultStyle['table-header-color']) {
          let val = defaultStyle['table-header-color'].replace('!important', '');
          themeInnerHtml += `#themeID .ant-table-thead .ant-table-cell{color:${val}}`;
          // str += `#themePreviewBox .ant-table-thead .ant-table-selection-column{background-color:#fff}`;
        }
        // 表格内容背景颜色
        if (defaultStyle['table-content-bg']) {
          let val = defaultStyle['table-content-bg'];
          themeInnerHtml += `#themeID .ant-table .ant-table-tbody .ant-table-row{background-color:${val}}`;
          themeInnerHtml += `#themeID .ant-table .ant-table-tbody .ant-table-row > td.ant-table-column-sort{background-color:${val}}`;
          themeInnerHtml += `#themeID .ant-table-pagination{background-color:${val}}`;
        }
        // 表格内容文字颜色
        if (defaultStyle['table-content-color']) {
          let val = defaultStyle['table-content-color'].replace('!important', '');
          themeInnerHtml += `#themeID .ant-table .ant-table-tbody .ant-table-row{color:${val}}`;
        }
        // 表格内容行鼠标划过的背景颜色
        if (defaultStyle['table-content-hover_bg']) {
          let val = defaultStyle['table-content-hover_bg'].replace(
            '!important',
            '',
          );
          themeInnerHtml += `#themeID .ant-table-tbody > tr.ant-table-row:hover > td{background-color:${val}}`;
        }
        //表格内容选中行背景色
        if (defaultStyle['table-selected-row-bg']) {
          let val = defaultStyle['table-selected-row-bg'].replace(
            '!important',
            '',
          );
          themeInnerHtml += `#themeID .ant-table-row-selected td{background-color:${val}}`;
          themeInnerHtml += `#themeID .ant-table-row-selected td.ant-table-column-sort{background-color:${val}!important}`;
        }
  
        // 表格多选框背景色
        if (defaultStyle['table-checkbox']) {
          let val = defaultStyle['table-checkbox'].replace('!important', '');
          themeInnerHtml += `#themeID .ant-table .ant-table-row-selected .ant-table-selection-column .ant-checkbox-inner{background-color:${val};border-color:${val}}`;
          themeInnerHtml += `#themeID .ant-table .ant-table-row-selected .ant-table-selection-column .ant-radio-inner{background-color:${val};border-color:${val}}`;
          // str += `#themePreviewBox .ant-table .ant-table-selection-column .ant-checkbox{border-color:${val}}`;
        }
  
        //表格内容中图标的颜色
        if (defaultStyle['tableIcon_color']) {
          let val = defaultStyle['tableIcon_color'];
          themeInnerHtml += `#themeID .ant-table .ant-table-tbody .ant-table-cell .anticon{color:${val}}`;
        }
  
        //表格边框
        if (defaultStyle['@border-color-split']) {
          let val = defaultStyle['@border-color-split'].replace('!important', '');
          // themeInnerHtml += `#themeID .ant-table-bordered > .ant-table-container,#themePreviewBox .ant-table-bordered td,#themePreviewBox .ant-table-small,#themePreviewBox .ant-table-small .ant-table-content,#themePreviewBox .ant-table-thead > tr > th,#themePreviewBox .ant-table-scroll .ant-table-placeholder,#themePreviewBox .ant-table-content .ant-table-placeholder{border-color:${val}}`;
        }
        /!*TableList 表格样式-------------------------------------------------------------------------END *!/*/

      addCssByStyle(themeInnerHtml);
    } catch (e: any) {
      throw new Error(e);
    }
  }
};

/* 添加style标签设置全局样式 */
const addCssByStyle = (themeStyleInfo: string) => {
  let themeStyle = document.getElementById('themeStyle');
  if (themeStyle) {
    themeStyle.remove();
  }

  if (themeStyleInfo) {
    let themeStyle = document.createElement('style');
    themeStyle.setAttribute('type', 'text/css');
    themeStyle.setAttribute('id', 'themeStyle');
    themeStyle.innerHTML = themeStyleInfo;
    let head: any = document.getElementsByTagName('head').item(0);
    head.appendChild(themeStyle);
  }
};
